<template>
	<a-card style="margin: -15px">
		<a-row style="margin-bottom: 1rem">

			<a-col :span="4">
				<a-space direction="vertical">
					<a-input v-model:value="this.dcOrderQueryBo.phone" placeholder="会员手机号" />
				</a-space>
			</a-col>
			<a-col :span="4">
				<a-space direction="vertical">
					<a-input v-model:value="this.dcOrderQueryBo.id" placeholder="订单编号" />
				</a-space>
			</a-col>
			<a-col :span="4">
				<a-space direction="vertical">
					<a-input v-model:value="this.dcOrderQueryBo.name" placeholder="藏品名称(模糊搜索)" />
				</a-space>
			</a-col>
			<a-col :span="4">
				<a-button type="primary" @click="onSearch(1)">搜索</a-button>
			</a-col>
		</a-row>
		<a-row style="margin-bottom: 1rem">
			<a-col :span="24">
				<a-table :columns="columns" :data-source="dataSource" :pagination="false">
					<template #bodyCell="{ column, record }">
						<!--藏品-->
						<template v-if="column.key === 'name'">
							<table>
								<tr>
									<td style="width:3rem; height:3rem;">
										<a-image :src="record.cover" height="50" width="50" />
									</td>
									<td style="width: 1rem"></td>
									<td><a @click="getNft(record.nftId)">{{ record.name }}</a>
									</td>
								</tr>
							</table>
						</template>
						<!--会员-->
						<template v-if="column.key === 'userName'">
							<table>
								<tr>
									<td style="width:3rem; height:3rem;">
										<a-image :src="record.uuidAvatar" height="50" width="50" />
									</td>
									<td style="width: 1rem"></td>
									<td><a>{{ record.nickname }}</a>
										<br />
										<span>{{ record.phone }}</span>
									</td>
								</tr>
							</table>
						</template>
						<!--状态-->
						<template v-if="column.key === 'status'">
							<a-tag v-if="record.status==0" :bordered="false" color="success">待支付</a-tag>
							<a-tag v-if="record.status==1" :bordered="false" color="orange">已支付</a-tag>
							<a-tag v-if="record.status==2" :bordered="false" color="orange">已取消</a-tag>
						</template>
						<!--操作-->
						<template v-if="column.key === 'actions'">
							<a-dropdown>
								<template #overlay>
									<a-menu>
										<a-menu-item key="4" @click="getOrder(record.id)">
											查看详情
										</a-menu-item>
										<a-menu-item key="5" @click="getOrderSell(record.id)">
											支付记录
										</a-menu-item>
									</a-menu>
								</template>
								<a-button>
									操作
									<DownOutlined />
								</a-button>
							</a-dropdown>
						</template>
					</template>
				</a-table>
			</a-col>
		</a-row>
		<a-flex justify="flex-end">
			<a-pagination
				size="small"
				@change="onChange"
				show-size-changer
				:pageSizeOptions="['5','10','20','50','100']"
				v-model:current="this.page.pageNo"
				v-model:page-size="this.page.pageSize"
				:total="this.page.total"
				:show-total="(total, range) => `${range[0]}-${range[1]} 共 ${total} 条`"/>
		</a-flex>
	</a-card>
	<!--  查看详情-->
	<template>
		<div>
			<a-modal v-model:open="this.open" title="订单信息" width="700px">
				<br />
				<a-descriptions :column=2>
					<a-descriptions-item label="会员信息">
						<a-avatar :size="76" :src=this.dcOrderVo.uuidAvatar>
							<template #icon>
								<UserOutlined />
							</template>
						</a-avatar>
					</a-descriptions-item>
					<a-descriptions-item label="藏品信息">
						<a-avatar :size="76" :src=this.dcOrderVo.cover>
							<template #icon>
								<UserOutlined />
							</template>
						</a-avatar>
					</a-descriptions-item>
					<a-descriptions-item label="会员名称">{{ this.dcOrderVo.nickname }}</a-descriptions-item>
					<a-descriptions-item label="藏品名称">{{ this.dcOrderVo.name }}</a-descriptions-item>
					<a-descriptions-item label="订单标识">{{ this.dcOrderVo.id }}</a-descriptions-item>
					<a-descriptions-item label="合约地址">{{ this.dcNftCertVo.contractAddr }}</a-descriptions-item>
					<a-descriptions-item label="状态">
						<a-tag v-if="this.dcOrderVo.status==1" :bordered="false" color="success">已支付</a-tag>
						<a-tag v-if="this.dcOrderVo.status==2" :bordered="false" color="orange">待支付</a-tag>
						<a-tag v-if="this.dcOrderVo.status==3" :bordered="false" color="orange">已取消</a-tag>
					</a-descriptions-item>
					<a-descriptions-item label="链上标识">{{ this.dcNftCertVo.chainAddr }}</a-descriptions-item>
					<a-descriptions-item label="藏品单价">{{ this.dcOrderVo.unitPrice }}</a-descriptions-item>
					<a-descriptions-item label="购买数量">{{ this.dcOrderVo.num }}</a-descriptions-item>
					<a-descriptions-item label="订单金额">{{ this.dcOrderVo.orderAmount }}</a-descriptions-item>
					<a-descriptions-item label="实付金额">{{ this.dcOrderVo.realityAmount }}</a-descriptions-item>
					<a-descriptions-item label="下单时间">{{ this.dcOrderVo.createTime }}</a-descriptions-item>
					<a-descriptions-item label="创建人">{{ this.dcOrderVo.createUser }}</a-descriptions-item>
					<a-descriptions-item label="更新人">{{ this.dcOrderVo.updateUser }}</a-descriptions-item>
					<a-descriptions-item label="更新时间">{{ this.dcOrderVo.updateTime }}</a-descriptions-item>
				</a-descriptions>
			</a-modal>
			<a-modal v-model:open="this.openPay" title="支付记录" width="700px">
				<br />
				<a-card v-for="item in this.dcPayVo.dcPaymentLogVos " :title="'交易流水号 :'+item.outFlowNo" hoverable
						style="margin: 1rem">
					<a-descriptions :column=2>
						<a-descriptions-item label="支付方式">
							<a-tag v-if="item.payWay==0" :bordered="false" color="orange">微信</a-tag>
							<a-tag v-if="item.payWay==1" :bordered="false" color="orange">支付宝</a-tag>
							<a-tag v-if="item.payWay==2" :bordered="false" color="orange">银联</a-tag>
						</a-descriptions-item>
						<a-descriptions-item label="支付类型">
							<a-tag v-if="item.payType==0" :bordered="false" color="orange">网站支付</a-tag>
							<a-tag v-if="item.payType==1" :bordered="false" color="orange">App支付</a-tag>
							<a-tag v-if="item.payType==2" :bordered="false" color="orange">扫码支付</a-tag>
						</a-descriptions-item>
						<a-descriptions-item label="付款时间">{{ item.payDate }}</a-descriptions-item>
						<a-descriptions-item label="付款金额">{{ item.payment }}</a-descriptions-item>
					</a-descriptions>
				</a-card>
			</a-modal>
		</div>
	</template>
</template>

<script>
import { DownOutlined } from "@ant-design/icons-vue";
import orderApi from "@/api/nft/artWork/nftOrder";

export default {
	name: "Order",
	components: { DownOutlined },
	data() {
		return {
			open: false,
			openPay: false,
			dataSource: [],
			dcOrderVo: {},
			dcPayVo: {},
			dcNftCertVo: {},
			page: {
				pageNo: 1,
				pageSize: 5,
				total: 0
			},
			dcOrderQueryBo: {
				phone: "",
				id: "",
				name: ""
			},
			columns: [
				{
					title: "订单编号",
					dataIndex: "id",
					key: "id"
				},
				{
					title: "会员",
					dataIndex: "userName",
					key: "userName"
				},
				{
					title: "藏品",
					dataIndex: "name",
					key: "name"
				},
				{
					title: "订单金额",
					dataIndex: "orderAmount",
					key: "orderAmount"
				},
				{
					title: "订单状态",
					dataIndex: "status",
					key: "status"
				},
				{
					title: "订单时间",
					dataIndex: "createTime",
					key: "createTime"
				},
				{
					title: "操作",
					dataIndex: "actions",
					key: "actions"
				}
			]
		};
	},
	methods: {
		queryOrder() {
			orderApi.queryNft(this.page.pageNo, this.page.pageSize, this.dcOrderQueryBo).then((data) => {
				let pages = data;
				this.page.pageSize = pages.size;
				this.page.total = pages.total;
				this.dataSource = pages.records;
			});
		},//查询订单信息
		//搜索之前先把页码置为1
		onSearch(num) {
			this.page.pageNo = num;
			this.queryOrder();
		},
		onChange(pageNo) {
			this.queryOrder();
			this.page.pageNo = pageNo;
		},//分页查询订单信息
		getOrder(id) {
			this.open = true;
			orderApi.getOrder(id).then((resp) => {
				debugger
				this.dcOrderVo = resp;
				this.dcNftCertVo = resp.dcNftCertVo;
			});
		},//查看藏品订单详情
		getOrderSell(id) {
			this.openPay = true;
			orderApi.getOrder(id).then((resp) => {
				debugger
				this.dcPayVo = resp;
			});
		}//查看藏品订单支付信息详情详情
	},
	mounted() {
		this.queryOrder();//调用查询
	}
};
</script>

<style scoped>

</style>
